<template>
  <basic-dialog
    :title="title"
    :visible="visible"
    :loading="loading"
    :width="600"
    has-footer
    @open="handleOpen"
    @closed="handleClose"
    @submit="handleSubmit"
  >
    <el-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      require-asterisk-position="right"
      label-width="100px"
      @submit.prevent
    >
      <el-form-item prop="name" label="名称">
        <el-input v-model="formState.name" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select v-model="formState.type" class="w-full" placeholder="请选择">
          <el-option
            v-for="item in PROVIDER_TYPE"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <section v-if="formState.type === 'Alone'">
        <el-form-item label="URL" prop="authorization.aloneConfig.url">
          <el-input
            v-model.trim="formState.authorization.aloneConfig.url"
            placeholder="http(s)://example.com:8080"
            maxlength="200"
          ></el-input>
        </el-form-item>
        <el-form-item label="APP ID" prop="authorization.aloneConfig.app_id">
          <el-input
            v-model.trim="formState.authorization.aloneConfig.app_id"
            placeholder="请输入APP ID"
            maxlength="200"
          ></el-input>
        </el-form-item>
        <el-form-item label="私钥" prop="authorization.aloneConfig.app_key">
          <el-input
            v-model.trim="formState.authorization.aloneConfig.app_key"
            placeholder="请输入私钥"
            maxlength="200"
          ></el-input>
        </el-form-item>
      </section>
      <section v-else-if="formState.type === 'AliYun'">
        <el-form-item
          label="Secret Key"
          prop="authorization.alidnsConfig.secret_key"
        >
          <el-input
            v-model.trim="formState.authorization.alidnsConfig.secret_key"
            placeholder="请输入Secret Key"
            maxlength="200"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="Access Key"
          prop="authorization.alidnsConfig.access_key"
        >
          <el-input
            v-model.trim="formState.authorization.alidnsConfig.access_key"
            placeholder="请输入Access Key"
            maxlength="200"
          ></el-input>
        </el-form-item>
      </section>
      <section v-else-if="formState.type === 'TencentCloud'">
        <el-form-item
          label="Secret ID"
          prop="authorization.tencentCloudConfig.secret_id"
        >
          <el-input
            v-model.trim="formState.authorization.tencentCloudConfig.secret_id"
            placeholder="请输入Secret ID"
            maxlength="200"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="Secret Key"
          prop="authorization.tencentCloudConfig.secret_key"
        >
          <el-input
            v-model.trim="formState.authorization.tencentCloudConfig.secret_key"
            placeholder="请输入Secret Key"
            maxlength="200"
          ></el-input>
        </el-form-item>
      </section>
      <section v-else-if="formState.type === 'CloudFlare'">
        <el-form-item label="Email" prop="authorization.cloudflareConfig.email">
          <el-input
            v-model.trim="formState.authorization.cloudflareConfig.email"
            placeholder="请输入Email"
            maxlength="200"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="API Token"
          prop="authorization.cloudflareConfig.api_token"
        >
          <el-input
            v-model.trim="formState.authorization.cloudflareConfig.api_token"
            placeholder="请输入API Token"
            maxlength="200"
          ></el-input>
        </el-form-item>
      </section>
      <section v-else-if="formState.type === 'NameSilo'">
        <el-form-item
          label="API Key"
          prop="authorization.nameSiloConfig.api_key"
        >
          <el-input
            v-model.trim="formState.authorization.nameSiloConfig.api_key"
            placeholder="请输入API Key"
            maxlength="200"
          ></el-input>
        </el-form-item>
      </section>
    </el-form>
  </basic-dialog>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'

import type {
  CreateDnsParams,
  DnsModel,
  UpdateDnsParams
} from '@/apis/model/dns'
import { PROVIDER_TYPE } from '@/config/constant/dns'

interface IProps {
  visible: boolean
  record: DnsModel
  loading: boolean
}
interface IEmits {
  (event: 'update:visible', value: boolean): void
  (event: 'update:loading', value: boolean): void
  (event: 'refresh'): void
}

const props = defineProps<IProps>()
const title = computed(() => (props.record ? '编辑账户' : '创建账户'))
const emit = defineEmits<IEmits>()
const formRef = ref<FormInstance>()

const formState = reactive<CreateDnsParams | UpdateDnsParams>({
  name: '',
  type: 'Alone',
  authorization: {
    aloneConfig: {
      app_id: '',
      app_key: '',
      url: ''
    },
    alidnsConfig: {
      secret_key: '',
      access_key: ''
    },
    tencentCloudConfig: {
      secret_id: '',
      secret_key: ''
    },
    cloudflareConfig: {
      email: '',
      api_token: ''
    },
    nameSiloConfig: {
      api_key: ''
    }
  }
})
const rules = reactive<FormRules>({
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  type: [{ required: true, message: '请选择', trigger: 'change' }],
  //1: dns 解析系统
  'authorization.aloneConfig.url': [
    { required: true, message: '请输入URL', trigger: 'blur' },
    {
      validator: validateUrl
    }
  ],
  'authorization.aloneConfig.app_id': [
    { required: true, message: '请输入APP ID', trigger: 'blur' }
  ],
  'authorization.aloneConfig.app_key': [
    { required: true, message: '请输入私钥', trigger: 'blur' }
  ],
  //2: aliyun
  'authorization.alidnsConfig.secret_key': [
    { required: true, message: '请输入Secret Key', trigger: 'blur' }
  ],
  'authorization.alidnsConfig.access_key': [
    { required: true, message: '请输入Access Key', trigger: 'blur' }
  ],
  //3: tencent
  'authorization.tencentCloudConfig.secret_id': [
    { required: true, message: '请输入Secret ID', trigger: 'blur' }
  ],
  'authorization.tencentCloudConfig.secret_key': [
    { required: true, message: '请输入Secret Key', trigger: 'blur' }
  ],
  // 4: cloudflare
  'authorization.cloudflareConfig.email': [
    { required: false, message: '请输入Email', trigger: 'blur' },
    {
      type: 'email'
    }
  ],
  'authorization.cloudflareConfig.api_token': [
    { required: true, message: '请输入API Token', trigger: 'blur' }
  ],
  //5: namesilo
  'authorization.nameSiloConfig.api_key': [
    { required: true, message: '请输入API Key', trigger: 'blur' }
  ]
})
const handleClose = () => {
  formRef.value?.resetFields()
  emit('update:visible', false)
}
const handleOpen = () => {
  if (!props?.record) return
  const { authorization, ...params } = props?.record!
  if (props.record) Object.assign(formState, params)
  if (params.type === 'AliYun') {
    formState.authorization.alidnsConfig = { ...authorization } || {}
  } else if (params.type === 'TencentCloud') {
    formState.authorization.tencentCloudConfig = { ...authorization } || {}
  } else if (params.type === 'CloudFlare') {
    formState.authorization.cloudflareConfig = { ...authorization } || {}
  } else if (params.type === 'Alone') {
    formState.authorization.aloneConfig = { ...authorization } || {}
  } else if (params.type === 'NameSilo') {
    formState.authorization.nameSiloConfig = { ...authorization } || {}
  }
}
async function handleSubmit() {
  await formRef.value?.validate()
  const apiPath = props.record ? updateDnsApi : createDnsApi
  const params = { ...formState } as any
  if (props.record?.id!) params.id = props.record.id
  if (params.type === 'AliYun') {
    params.authorization = { ...formState.authorization.alidnsConfig }
  } else if (params.type === 'TencentCloud') {
    params.authorization = { ...formState.authorization.tencentCloudConfig }
  } else if (params.type === 'CloudFlare') {
    params.authorization = { ...formState.authorization.cloudflareConfig }
  } else if (params.type === 'Alone') {
    params.authorization = { ...formState.authorization.aloneConfig }
  } else if (params.type === 'NameSilo') {
    params.authorization = { ...formState.authorization.nameSiloConfig }
  }
  emit('update:loading', true)
  apiPath(params)
    .then(() => {
      ToastUtils.success('操作成功')
      handleClose()
      emit('refresh')
    })
    .finally(() => emit('update:loading', false))
}
</script>

<style lang="scss" scoped></style>
